const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "development",
    entry: {
        //新增页面需配置
        index: './src/js/index/index.js',
        //新增页面需配置
        test: './src/js/test/test.js',
        material: './src/js/material/material.js',
        lease: './src/js/lease/lease.js',
        chargeManagement: './src/js/chargeManagement/chargeManagement.js',
        dataCenter: './src/js/dataCenter/dataCenter.js',
        register: './src/js/register/register.js',
        login: './src/js/login/login.js',
        // login: './src/js/login/login.js',
        pim: './src/js/pim/pim.js',
    },
    output: {
        // 设置打包后的代码存储路径
        path: path.resolve(__dirname, 'dist'),
        // 设置打包后的文件名
        filename: 'js/[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', // 设置要打包的源文件 HTML 的路径
            filename: './index.html', // 设置打包后的文件路径和文件名
            chunks: ['index']  // 当前 HTML 文件中引入的 JS 的名字 
        }),
        //添加新页面需重新调用方法,并传参对应的页面名称
        new HtmlWebpackPlugin({
            template: './src/test.html', // 设置要打包的源文件 HTML 的路径
            filename: './test.html', // 设置打包后的文件路径和文件名
            chunks: ['test']  // 当前 HTML 文件中引入的 JS 的名字 
        }),
        new HtmlWebpackPlugin({
            template: './src/material.html', // 设置要打包的源文件 HTML 的路径
            filename: './material.html', // 设置打包后的文件路径和文件名
            chunks: ['material'], // 当前 HTML 文件中引入的 JS 的名字 
        }),
        new HtmlWebpackPlugin({
            template: './src/register.html', // 设置要打包的源文件 HTML 的路径
            filename: './register.html', // 设置打包后的文件路径和文件名
            chunks: ['register']  // 当前 HTML 文件中引入的 JS 的名字
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html', // 设置要打包的源文件 HTML 的路径
            filename: './login.html', // 设置打包后的文件路径和文件名
            chunks: ['login']  // 当前 HTML 文件中引入的 JS 的名字
        }),
        new HtmlWebpackPlugin({
            template: './src/pim.html', // 设置要打包的源文件 HTML 的路径
            filename: './pim.html', // 设置打包后的文件路径和文件名
            chunks: ['pim']  // 当前 HTML 文件中引入的 JS 的名字
        }),
        new HtmlWebpackPlugin({
            template: './src/lease.html', // 设置要打包的源文件 HTML 的路径
            filename: './lease.html', // 设置打包后的文件路径和文件名
            chunks: ['lease'], // 当前 HTML 文件中引入的 JS 的名字 
        }),
        new HtmlWebpackPlugin({
            template: './src/chargeManagement.html', // 设置要打包的源文件 HTML 的路径
            filename: './chargeManagement.html', // 设置打包后的文件路径和文件名
            chunks: ['chargeManagement']  // 当前 HTML 文件中引入的 JS 的名字 
        }),
        new HtmlWebpackPlugin({
            template: './src/dataCenter.html', // 设置要打包的源文件 HTML 的路径
            filename: './dataCenter.html', // 设置打包后的文件路径和文件名
            chunks: ['dataCenter']  // 当前 HTML 文件中引入的 JS 的名字 
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024 * 8, // 8kb 以下的图片采用 base64 进行处理
                            outputPath: './images/',  // 打包后图片的存储路径
                            esModule: false
                        }
                    }
                ]
            },
            // html 中的图片
            {
                test: /\.html$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    devServer: {
        open: true, // 启动服务器时自动打开页面
        hot: true, // 热更新
    }
}















